<template>
	<div>
		<van-row>
			<!-- 搜索 -->
		</van-row>
		<van-row>
			<!-- 左侧分类 -->
			<van-col span="6">
				<van-sticky :offset-top="46">
					<van-sidebar v-model="activeKey">
						<van-sidebar-item v-for="(item,i) in categoryList" :title="item.name"
							@click="onClickLeftMenus(item.id)" />
					</van-sidebar>
				</van-sticky>

			</van-col>
			<!-- 右侧商品列表 -->
			<van-col span="18">
				<!-- 商品卡片列表 -->
				<van-card v-for="(item,i) in productList" :key="i" :price="item.price"
					:desc="item.spec" :title="item.title" :thumb=" APIDomainName + item.pic"
					@click="onDetail(item.id)" />
			</van-col>
		</van-row>
	</div>
</template>

<script>
	//1.导入封装后的接口	
	import {getProductListAPI} from "@/api/product.js";
	import {getCategoryAPI} from "@/api/category.js"

	export default {
		data() {
			return {
				productList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表
				category_id: null,

				//左侧 导航栏
				activeKey: 0,
			}
		},

		//生命周期的钩子函数，当实例别创建好了后被调用
		created() {
			//获取所有分类
			getCategoryAPI().then(result => {
				console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.getProductList();
			});
		},
		methods: {
			//获取当前分类id的商品列表
			getProductList() {
				//2.使用封装后的接口
				getProductListAPI({
					category_id: this.category_id
				}).then((result) => {
					// console.log(result);
					this.productList = result.data
				});
			},

			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.category_id = category_id; //更新分类id
				this.getProductList(); //获取该分类id对应的所有商品
			},

			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {id},
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.van-sidebar {
		width: 100px;
	}

	.van-sidebar-item {
		padding: 10px;
	}

	.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}
</style>
